<template>
    <div>
        <el-table v-if="tableData.length > 0" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" label="" :selectable="selectable" align="center" width="60" />
            <el-table-column type="index" :index="indexMethod" min-width="10%" label="序号" align="center"></el-table-column>
            <el-table-column min-width="20%" label="问题蒸馏词" align="center" prop="Keyword"></el-table-column>
            <el-table-column min-width="40%" label="问题" align="center" prop="Title"></el-table-column>
            <el-table-column min-width="15%" align="center">
                <template #default="scope">
                    <el-button type="primary" plain @click="handleGenerate(scope.row.ID)" v-if="scope.row.CurrentState == ''">生成文章</el-button>
                    <el-button type="info" plain disabled v-else>{{ scope.row.CurrentState }}</el-button>
                </template>
            </el-table-column>
            <el-table-column min-width="15%" align="center" label="文章数">
                <template #default="scope">
                    <el-link :href="'#/geo-basic/project-management/article/list/' + scope.row.ID" type="primary" underline="always" v-if="scope.row.ArticleCount > 0">{{ scope.row.ArticleCount }}</el-link>
                    <p v-else>{{ scope.row.ArticleCount }}</p>
                </template>
            </el-table-column>
        </el-table>
        <div v-else>
            <el-empty :image-size="200" />
        </div>
        <div class="pt-16px flex items-center">
            <div class="flex items-center text-12px">
                已选 {{ selectionData.length }} 条数据 <el-button type="primary" text size="small" class="ml-12px"
                    @click="handleBatchSetArticleNum">批量设置文章数</el-button>
            </div>
        </div>
        <div class="flex flex-center pb-10px">
            <Pagination v-if="tableData.length > 0" v-model:total="page.total" v-model:page="queryParams.curPage" v-model:limit="queryParams.pageSizes" @pagination="handleQuery" />
        </div>
        <el-dialog v-model="state.isArticle" :show-close="false" modal-class="customize-dialog"
        :append-to-body="true" :close-on-click-modal="false" align-center width="400px">
            <template #header="{ titleId, titleClass }">
                <div class="flex justify-between items-center dialog-header">
                    <div class="flex items-center">
                        <h4 :id="titleId" :class="titleClass">生成文章</h4>
                    </div>
                    <div class="flex items-center">
                        <svg-icon size="16px" icon-class="close-line" @click="handleCancel()"></svg-icon>
                    </div>
                </div>
            </template>
            <div class="pr-20px">
                <el-form label-width="120px">
                    <el-form-item label="任务条数">
                        <el-input-number v-model="state.article.number" :min="0" :max="100" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="flex flex-center mt-16px">
                <el-button @click="handleCancel()">取消</el-button>
                <el-button @click="handleLength()" type="primary">提交</el-button>
            </div>
        </el-dialog>
        <el-dialog v-model="state.isBatchArticle" :show-close="false" modal-class="customize-dialog"
        :append-to-body="true" :close-on-click-modal="false" align-center width="400px">
            <template #header="{ titleId, titleClass }">
                <div class="flex justify-between items-center dialog-header">
                    <div class="flex items-center">
                        <h4 :id="titleId" :class="titleClass">批量设置文章数</h4>
                    </div>
                    <div class="flex items-center">
                        <svg-icon size="16px" icon-class="close-line" @click="handleBatchCancel()"></svg-icon>
                    </div>
                </div>
            </template>
            <div class="pr-20px">
                <el-form label-width="120px">
                    <el-form-item label="任务条数">
                        <el-input-number v-model="state.batchArticleNum" :min="0" :max="100" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="flex flex-center mt-16px">
                <el-button @click="handleBatchCancel()">取消</el-button>
                <el-button @click="handleBatchLength()" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { createArticleApi,batchSetArticleNumApi } from '@/api/geoBasic'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { SuccessFilled,WarningFilled } from '@element-plus/icons-vue'

const props = defineProps({
    tableData: {
        type: Array<any>,
        default: () => []
    },
    page:{
        type: Object,
        default: () => {}
    },
    noDataStr: {
        type: String,
        default: '暂无数据'
    },
})

const state = reactive({
    article:{
        id:0,
        number:1,
    },
    isArticle:false,
    isBatchArticle:false,
    batchArticleNum:1,
    selectIds: <number []>[]
})

const emit = defineEmits(['update:data'])

const queryParams = reactive({
    curPage: props.page.curPage,
    pageSizes: props.page.pageSizes,
    type:props.page.type,
    limit:props.page.limit,
})

const selectionData = ref([])

const selectable = (row: any) => row.CurrentState == ''

function handleQuery(val: any) {
    queryParams.limit = val.limit
    emit('update:data', queryParams)
}

function handleGenerate(id: number) {
    state.article.id = id
    state.isArticle = true
}

async function handleLength() {
    if(state.article.number <= 0){
        ElMessage.error('请输入任务条数')
        return
    }
    const res: ResType = await createArticleApi({ ID:state.article.id,count:state.article.number })
    if (res.code === 200) {
        state.isArticle = false
        state.article.number = 1
        confirmMessageBox(SuccessFilled, res.message,'','',() => {
            emit('update:data', queryParams)
        },() => {})
    } else {
        ElMessage.error(res.message)
    }
}

async function handleBatchLength() {
    if(state.batchArticleNum <= 0){
        ElMessage.error('请输入任务条数')
        return
    }
    state.isBatchArticle = false
    const res = await batchSetArticleNumApi({
        id:0,
        ids: selectionData.value,
        count:state.batchArticleNum
    })
    if (res.code === 200) {
        selectionData.value = []
        confirmMessageBox(SuccessFilled, res.message,'','',() => {
        emit('update:data', queryParams)
    },() => {})
    } else {
        ElMessage.error(res.message)
    }
}

async function handleCancel() {
    state.isArticle = false
    state.article.number = 1
}

async function handleBatchCancel() {
    state.isBatchArticle = false
    selectionData.value = []
}

function indexMethod(index: number) {
    return (queryParams.curPage - 1) * queryParams.limit + index + 1
}

function handleSelectionChange(rows: any) {
    selectionData.value = rows.map((row: any) => row.ID)
}

async function handleBatchSetArticleNum() {
    if (!selectionData.value.length) {
        confirmMessageBox(WarningFilled, '请选择多条要批量设置文章数的蒸馏词？')
    } else {
        state.isBatchArticle = true
    }
}
</script>

<style scoped>

</style>